<!-- 
  @name: 加注机详情
  @date: 2020.3.9
 -->
<template>
	<view class="content">
		<view class="cont">
			<view class="list">
				<text class="left">设备出厂编号</text><text>{{info.macCode}}</text>
			</view>
			<view class="list">
				<text class="left">最新设备型号</text><text>{{info.macType}}</text>
			</view>
			<view class="list bn">
				<text class="left">安装启用日期</text><text>{{info.enableTime}}</text>
			</view>
		</view>
		
		<view class="cont mt">
			<view class="list">
				<text class="left">加注流水</text>
				<text class="left" style="text-align: center;">{{info.orderNum}}单</text>
				<text class="nv right" @tap="$navigateTo('./macRecList?machineId=' + info.machineId)">查看明细</text>
			</view>
			<view class="list">
				<text class="left">理论余量</text>
				<text class="left2"></text>
				<!-- <text class="left3" @tap="showPopup = true">余量校准</text> -->
				<!-- <text class="nv" @tap="$navigateTo('/pages/set-fill/index?machineId=' + info.machineId)">蓄注记录</text> -->
				<text class="left"  style="text-align: right;">{{info.unUseCapacity}}kg</text>
			</view>
			<view class="list">
				<text class="left">传感器余量</text>
				<text class="left"></text>
				<text class="left" style="text-align: right;">
					{{info.hasSensor===1? (info.iotRestWeight+'kg'):'---'}}
				</text>
			</view>
			<view class="list">
				<text class="left">液位传感器</text>
				<text v-text="info.hasSensor === 1 ? '有' : '无'"></text>
			</view>
			<view class="list">
				<text class="left">储液罐总容量</text><text>{{info.totalCapacity}}kg</text>
			</view>
			<view class="list bn">
				<text class="left">液位总高度</text>
				<text v-text="info.totalHeight ? (info.totalHeight + 'cm') : '-'"></text>
			</view>
		</view>
		
		<!-- 余量校准弹窗 -->
		<view class="_popup" v-show="showPopup" @tap="showPopup = false"></view>
		<view class="popup_center" v-show="showPopup">
			<view class="_close" @tap="showPopup = false"></view>
			<view class="_title">余量校准 (kg)</view>
			<view class="_input">
				<input type="digit" class="_int" placeholder="请输入当前实际余量值" placeholder-class="phcolor" v-model.trim="currentCapacity" />
			</view>
			<button class="_btn" @tap="submit">确定</button>
		</view>
		
		<view class="cont mt">
			<view class="list">
				<text class="left">机器名称</text><text>{{info.macName}}</text>
			</view>
			<view class="list">
				<text class="left">机器显示品牌</text><text>{{info.ureaType}}</text>
			</view>
			<view class="list">
				<text class="left">机器显示单价</text>
				<text>{{info.ureaPrice}}元/<text v-text="info.units === 0 ? 'L' : 'kg'"></text></text>
			</view>
			<view class="list">
				<text class="left">灯箱打开时间</text><text>{{info.openTime}}</text>
			</view>
			<view class="list">
				<text class="left">灯箱关闭时间</text><text>{{info.closeTime}}</text>
			</view>
			<view class="list bn">
				<text class="left">机器开启/停用</text>
				<text v-text="info.macStatus === 2 ? '已开启' : '已停用'"></text>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub"  @tap="goEdit" v-if="userMain === 1">编辑</view>
		<view class="btn_pub delete" @tap="deleteMac" v-if="userMain === 1">解绑</view>
		<!-- 操作失败提示 -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				macCode: '',  //机器码
				info: {
					hasSensor: 0
				},  //信息
				showPopup: false,  //是否显示弹窗
				currentCapacity: '',  //余量校准
				userMain: -1,  //账号权限，0-子账号，1-主账号，2-加注站职员
			}
		},
		onLoad(e) {
			this.userMain = this.$store.state.userMain;
			this.macCode = e.macCode;
			this.getInfo();
			uni.$on('site_editMac', this.getInfo);
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.userMain = this.$store.state.userMain;
				this.getInfo();
				this.$store.commit('hasLogin');
			}
		},
		onUnload() {
			uni.$off('site_editMac', this.getInfo);
		},
		methods: {
			//解绑机器
			deleteMac() {
				uni.showModal({
					content: '确认解绑该机器吗？',
					confirmColor: '#FF0000',
					confirmText: '解绑',
					success: (rs) => {
						if(rs.confirm) {
							this.$http({
								url: this.$api.siteUrl + 'doupdatefillmachine',
								data: {
									action: -1,
									machineId: this.info.machineId
								}
							}).then(res => {
								this.$successToast('已解绑！');
								uni.$emit('site_deleteMac', {
									machineId: this.info.machineId,
									siteId: this.info.siteId
								});
								this.$sucBack();
							});
						}
					}
				})
			},
			//前往编辑
			goEdit() {
				this.$store.commit('setTmpData', JSON.stringify(this.info));
				this.$navigateTo('./macEdit?type=e');
			},
			//余量校准
			submit() {
				if(!this.currentCapacity) {
					this.$showToast('请输入余量值！');
					return;
				}
				this.showPopup = false;
				this.$http({
					url: this.$api.siteUrl + 'correctoil',
					data: {
						machineId: this.info.machineId,
						currentCapacity: parseFloat(this.currentCapacity)
					}
				}).then(res => {
					this.$successToast('成功校准！');
					this.info.unUseCapacity = this.$operation(this.currentCapacity, '+', 0);
					this.currentCapacity = '';
					uni.$emit('refreshSite');
				});
			},
			//获取信息
			getInfo() {
				let now = new Date(); 
				let year = now.getFullYear();
				let month = (now.getMonth() + 1).toString().padStart(2,'0');
				let day = now.getDate().toString().padStart(2,'0');
				this.$http({
					url: this.$api.siteUrl + 'getfillmachinedetail',
					data: {
						macCode: this.macCode,
						startTime: '2000-01-01',
						endTime: `${year}-${month}-${day}`
					}
				}).then(res => {
					// 修改内容
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	.cont.mt {
		margin-top: $spacing-col;
	}
	.cont {
		width: 750rpx;
		padding: 0 35rpx;
		background-color: $color-white;
		.list.bn {
			border-bottom: none;
		}
		.list {
			width: 100%;
			padding: 33rpx 0;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			justify-content: space-between;
			.left,.right {
				flex: 1;
				color: $color-grey-dark;
			}
			.right {
				text-align: right;
			}
			.left2 {
				margin-left: 20rpx;
			}
			.left3 {
				width: 170rpx;
				padding-left: 23rpx;
				font-size: 22rpx;
				color: $color-primary;
			}
			.nv {
				color: $color-primary;
			}
		}
	}
	
	/* 按钮 */
	.btn_pub {
		margin-top: 60rpx;
	}
	.btn_pub.delete {
		margin-top: $spacing-col;
	}
	
</style>
